<!-- CommodityIndex -->
<template>
  <div id="CommodityIndex">
    <SearchForm @AddDataButton="AddDataButton" @SearchButton="SearchButton" />
    <div class="table_box">
      <el-table
        :data="tableData"
        border
        height="72vh"
        style="width: 100%"
      >
        <el-table-column label="#" type="index" width="50" align="center" />
        <el-table-column label="商品名称" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.productName ? scope.row.productName : '暂无数据' }}
          </template>
        </el-table-column>

        <el-table-column label="商品图片" width="200" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.productImg.length > 0">
              <el-image style="width: 180px; height: 100px" :src="scope.row.productImg[0]" fit="contain" />
            </span>
            <span v-else>暂无数据</span>
          </template>
        </el-table-column>

        <el-table-column label="商品编码" width="350" align="center">
          <template slot-scope="scope">
            {{ scope.row.productNo ? scope.row.productNo : '暂无数据' }}
          </template>
        </el-table-column>

        <el-table-column label="商品单价(元)" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.productPrice ? scope.row.productPrice : '暂无数据' }}
          </template>
        </el-table-column>

        <el-table-column label="商品库存" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.productNum ? scope.row.productNum : 0 }}
          </template>
        </el-table-column>

        <el-table-column label="商品类型" width="80" align="center">
          <template slot-scope="scope">
            {{ scope.row.productType ? scope.row.productType : '暂无数据' }}
          </template>
        </el-table-column>

        <el-table-column label="商品描述" width="400" align="center">
          <template slot-scope="scope">
            {{ scope.row.productDesc ? scope.row.productDesc : '暂无数据' }}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-edit" @click="EditClick(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="DeleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_box margin_top">
      <ComponentsPagination :total="total" :current-page="page" @SizeChange="SizeChange" @CurrentChange="CurrentChange" />
    </div>

    <CustomModal :dialog-title="DialogTitle" :dialog-visible="DialogVisible" @DialogClose="DialogClose" @DialogOk="DialogOk">
      <el-form ref="AddOrEidtFormRef" :model="AddOrEidtForm" :rules="AddOrEidtFormRules" label-width="100px" size="small">
        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="AddOrEidtForm.productName" clearable placeholder="请输入商品名称" />
        </el-form-item>

        <el-form-item label="商品单价" prop="productPrice">
          <el-input-number v-model="AddOrEidtForm.productPrice" :min="0" size="small" :precision="2" label="请输入商品单价" class="from_input_number" />
        </el-form-item>

        <el-form-item label="商品库存" prop="productNum">
          <el-input-number v-model="AddOrEidtForm.productNum" :min="0" size="small" label="请输入商品库存" class="from_input_number" />
        </el-form-item>

        <el-form-item label="商品类型" prop="productType">
          <el-select v-model="AddOrEidtForm.productType" placeholder="请选择商品类型" class="from_input_number" clearable>
            <el-option
              v-for="item in productTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="商品描述" prop="productDesc">
          <el-input v-model="AddOrEidtForm.productDesc" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 4, maxRows: 6}" clearable />
        </el-form-item>
      </el-form>
    </CustomModal>
  </div>
</template>

<script>
import SearchForm from './components/SearchForm'
import ComponentsPagination from '@/components/ComponentsPagination'
import CustomModal from '@/components/CustomModal'
import {
  Get_Commodity_Table_Data_Api, // 获取商品列表
  POST_Add_Commodity_Table_Data_Api, // 商品表格数据新增
  POST_Edit_Commodity_Table_Data_Api, // 商品表格数据编辑
  POST_Delete_Commodity_Table_Data_Api // 商品表格数据删除
} from '@/Api/CommodityApi'
import { mapState } from 'vuex'
import { PublicConfiguration_Limit } from '@utils/PublicConfiguration'
export default {
  name: 'CommodityIndex',
  components: {
    SearchForm,
    ComponentsPagination,
    CustomModal
  },
  data() {
    return {
      keyword: '', // 关键字搜索
      tableData: [], // 表格数据
      page: 1, // 当前页
      total: 0, // 数据总数
      limit: PublicConfiguration_Limit, // 每页条数
      DialogTitle: '', // Dialog标题
      DialogVisible: false, // Dialog状态
      AddOrEidtForm: {
        id: null, // id
        productName: '', // 商品名称
        productPrice: 0, // 商品单价(元)
        productNum: 0, // 商品库存
        productType: '', // 商品类型
        productDesc: '', // 商品描述
        productImg: [] // 商品图片
      },
      AddOrEidtFormRules: {
        productName: [
          { required: true, message: '请输入商品名称', trigger: ['change', 'blur'] }
        ],
        productPrice: [
          { required: true, message: '请输入商品单价', trigger: ['change', 'blur'] }
        ],
        productNum: [
          { required: true, message: '请输入商品库存', trigger: ['change', 'blur'] }
        ],
        productType: [
          { required: true, message: '请选择商品类型', trigger: ['change', 'blur'] }
        ],
        productDesc: [
          { required: true, message: '请输入商品描述', trigger: ['change', 'blur'] }
        ]
      },
      productTypeList: [
        { value: '手机', label: '手机' },
        { value: '相机', label: '相机' },
        { value: '耳机', label: '耳机' },
        { value: '电脑', label: '电脑' },
        { value: '手表', label: '手表' }
      ]
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {
    ...mapState('Common', [
      'MessageDuration',
      'CommonMessageCenter'
    ])
  },

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.Get_Commodity_Table_Data_Api_Fun(this.keyword, this.page, this.limit)
  },

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    /**
     * @date: 2024-10-30 21:30:29
     * @description: 新增
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    AddDataButton() {
      console.log('新增')
      this.DialogTitle = '新增商品'
      this.DialogVisible = true
    },
    /**
     * @date: 2024-10-30 21:44:26
     * @description: 搜索
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    SearchButton(SearchButton) {
      console.log('搜索', SearchButton)
      this.keyword = SearchButton.keyword
      this.Get_Commodity_Table_Data_Api_Fun(SearchButton.keyword, this.page, this.limit)
    },
    /**
     * @date: 2024-10-30 21:44:26
     * @description: 重置
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    ResetForm() {
      this.Get_Commodity_Table_Data_Api_Fun('', this.page, this.limit)
    },
    /**
     * @date: 2024-10-30 21:47:02
     * @description: 获取表格列表
     * @param {Object | TopFormSearch} 关键字
     * @param {Number | page} 当前页
     * @param {Number | limit} 每页多少数据 默认20
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    Get_Commodity_Table_Data_Api_Fun(TopFormSearch, page, limit) {
      Get_Commodity_Table_Data_Api({
        productName: TopFormSearch, // 搜索
        page: page, // 当前页码
        limit: limit // 每页条数
      }).then(res => {
        console.log('商品列表', res)
        if (res.code === 200) {
          this.tableData = res.data.tableData
          this.total = res.data.total
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: this.MessageDuration,
            center: this.CommonMessageCenter
          })
        }
      })
    },
    /**
     * @date: 2024-10-30 22:50:32
     * @description: 删除
     * @param {Object | row} 当前行数据
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    DeleteClick(row) {
      console.log('删除')
      this.$confirm('此操作将删除这条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        console.log('确定删除', row.id)
        this.POST_Delete_Commodity_Table_Data_Api_Fun(row.id)
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除',
          duration: this.MessageDuration,
          center: this.CommonMessageCenter
        })
      })
    },
    /**
     * @date: 2024-10-30 23:03:57
     * @description: 删除表格接口
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    POST_Delete_Commodity_Table_Data_Api_Fun(id) {
      POST_Delete_Commodity_Table_Data_Api({
        id: id
      }).then(res => {
        console.log('删除商品', res)
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: this.MessageDuration,
            center: this.CommonMessageCenter,
            onClose: this.Get_Commodity_Table_Data_Api_Fun(this.keyword, this.page, this.limit)
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: this.MessageDuration
          })
        }
      })
    },
    /**
     * @date: 2024-10-30 23:32:17
     * @description: 分页数量改变
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    SizeChange(SizeChange) {
      this.limit = SizeChange
      this.Get_Commodity_Table_Data_Api_Fun(this.keyword, this.page, SizeChange)
    },
    /**
     * @date: 2024-10-30 23:37:18
     * @description: 第几页
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    CurrentChange(CurrentChange) {
      this.page = CurrentChange
      this.Get_Commodity_Table_Data_Api_Fun(this.keyword, CurrentChange, this.limit)
    },
    /**
     * @date: 2024-10-30 22:51:46
     * @description: 编辑
     * @param {Object | row} 当前行数据
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    EditClick(row) {
      console.log('编辑', row)
      this.DialogTitle = '编辑商品'
      this.DialogVisible = true
      this.AddOrEidtForm = row
    },
    /**
     * @date: 2024-10-30 23:53:18
     * @description: dialog取消关闭
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    DialogClose() {
      console.log('dialog取消关闭')
      this.DialogVisible = false
    },
    /**
     * @date: 2024-10-30 23:53:27
     * @description: dialog确定
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    DialogOk() {
      console.log('dialog确定', this.AddOrEidtForm)
      if (this.AddOrEidtForm.id) { // 编辑
        this.POST_Edit_Commodity_Table_Data_Api_Fun(this.AddOrEidtForm)
      } else { // 新增
        this.POST_Add_Commodity_Table_Data_Api_Fun(this.AddOrEidtForm)
      }
    },
    /**
     * @date: 2024-10-30 23:53:27
     * @description: 商品表格数据编辑
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    POST_Edit_Commodity_Table_Data_Api_Fun(FormData) {
      POST_Edit_Commodity_Table_Data_Api({
        id: FormData.id, // id
        productName: FormData.productName, // 商品名称
        productPrice: FormData.productPrice, // 商品单价(元)
        productNum: FormData.productNum, // 商品库存
        productType: FormData.productType, // 商品类型
        productDesc: FormData.productDesc, // 商品描述
        productImg: FormData.productImg // 商品图片
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: this.MessageDuration,
            center: this.CommonMessageCenter,
            onClose: this.AddOrEditDialogClose()
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: this.MessageDuration
          })
        }
      })
    },
    /**
     * @date: 2024-10-30 23:53:27
     * @description: 商品表格数据新增
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    POST_Add_Commodity_Table_Data_Api_Fun(FormData) {
      POST_Add_Commodity_Table_Data_Api({
        productName: FormData.productName, // 商品名称
        productPrice: FormData.productPrice, // 商品单价(元)
        productNum: FormData.productNum, // 商品库存
        productType: FormData.productType, // 商品类型
        productDesc: FormData.productDesc, // 商品描述
        productImg: FormData.productImg // 商品图片
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: this.MessageDuration,
            center: this.CommonMessageCenter,
            onClose: this.AddOrEditDialogClose()
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: this.MessageDuration
          })
        }
      })
    },
    /**
     * @date: 2024-10-30 23:53:27
     * @description: 新增编辑成功弹窗回调
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    AddOrEditDialogClose() {
      this.DialogVisible = false
      this.Get_Commodity_Table_Data_Api_Fun(this.keyword, this.page, this.limit)
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
